<template>
	<view :style="[$func.bg('bg.jpg')]" class="main_bg">
		<app-header title="分享报告"></app-header>
		<view>
			<view class="bubble">平衡</view>
			<view class="bubble">TPU</view>
			<view class="bubble">步速</view>
			<view class="bubble">行走</view>
			<view class="bubble">BMI</view>
			<view class="bubble">步频</view>
			<view class="bubble">步幅</view>
			<view class="bubble">
				<view>
					<view>内在</view>
					<view>能力</view>
				</view>

			</view>
			<view class="bubble">营养</view>
			<view class="bubble">风险</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.bubble {
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
		position: absolute;
		animation: floatAnimation 4s infinite;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;

		&:nth-child(1) {
			top: 200rpx;
			left: 106rpx;
			background: linear-gradient(180deg, #EA6C67 0%, #F4B5B4 100%);
		}

		&:nth-child(2) {
			top: 250rpx;
			left: 402rpx;
			background: linear-gradient(180deg, #F7A110 0%, #FFD183 100%);
		}

		&:nth-child(3) {
			top: 420rpx;
			left: 206rpx;
			background: linear-gradient(180deg, #72EB72 0%, #B8F2B2 100%);

		}

		&:nth-child(4) {
			top: 420rpx;
			left: 562rpx;
			background: linear-gradient(180deg, #72EB72 0%, #B8F2B2 100%);

		}

		&:nth-child(5) {
			top: 610rpx;
			left: 78rpx;
			background: linear-gradient(180deg, #5EF2EF 0%, #BEF5F3 100%);

		}

		&:nth-child(6) {
			top: 540rpx;
			left: 376rpx;
			background: linear-gradient(180deg, #EA6C67 0%, #F4B5B4 100%);

		}

		&:nth-child(7) {
			top: 710rpx;
			left: 276rpx;

			background: linear-gradient(180deg, #72EB72 0%, #B8F2B2 100%);

		}

		&:nth-child(8) {
			top: 750rpx;
			left: 496rpx;
			background: linear-gradient(180deg, #F7A110 0%, #FFD183 100%);
		}

		&:nth-child(9) {
			top: 922rpx;
			left: 136rpx;
			background: linear-gradient(180deg, #F7A110 0%, #FFD183 100%);
		}

		&:nth-child(10) {
			top: 970rpx;
			left: 376rpx;
			background: linear-gradient(180deg, #EA6C67 0%, #F4B5B4 100%);

		}
	}

	@keyframes floatAnimation {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-20px);
		}
	}
</style>